<template>
    <div class="ze-an">
        <!--头部-->
        <div class="an-ning">
            <span class="go-back" @click="goBack">❮</span>
            <span class="an-type-name">分类</span>
        </div>

        <!--分类-->
        <div class="ze-body">
            <div class="body-type" >
                <li v-for="(am, index) in allMenu" :class="{'selected-type': currentName === am.menuName}" :key="index" @click="selectedType(am)">{{ am.menuName }}</li>
            </div>
            <div class="body-show">
                <div class="show-shop-type">
                    <div v-for="(st, index) in shopTypes" :key="index">
                        <div class="type-title">
                            {{ st.typeName }}
                        </div>
                        <div class="type-content" v-for="(t, idx) in st.typeList" :key="idx" @click="toQueryShopList(t.subTypeId)">
                            <img :src="t.subTypeIcon"/>
                            <p>{{ t.subTypeName }}</p>
                        </div>
                    </div>
                    <!-- <div class="type-title">
                        热门分类
                    </div>
                    <div class="type-content">
                        <img src="/src/assets/lunbo/image2.jpeg" />
                        <p>四个字的</p>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';

const router = useRouter();

const goBack = () => {
    router.back();
}

const allMenu = ref([
    {menuName: '推荐分类', id: 1},
    {menuName: '洗衣机', id: 2},
    {menuName: '冰箱冰柜', id: 3},
    {menuName: '空调', id: 4},
    {menuName: '电视影音', id: 5},
    {menuName: '厨房电器', id: 6},
    {menuName: '热水器', id: 7},
    {menuName: '水家电', id: 8},
    {menuName: '食饮生鲜', id: 9},
    {menuName: '生活电器', id: 10},
    {menuName: '全屋智能', id: 11},
    {menuName: '智能产品', id: 12},
    {menuName: '智能手表', id: 13},
    {menuName: '居家生活', id: 14},
    {menuName: '母婴个护', id: 15}
]);

const currentName = ref("推荐分类");
const selectedType = (menu) => {
    currentName.value = menu.menuName;
    getShopTypeById(menu.id);
}

const shopTypes = ref(null);

const getShopTypeById = (id) => {
    console.log("---", id);
    shopTypes.value = [
        {
            typeId: 1,
            typeName: '热门分类',
            typeList: [
                {
                    subTypeId: 1,
                    subTypeName: '冰箱' + id,
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 2,
                    subTypeName: '冰箱2',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 3,
                    subTypeName: '冰箱3',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 4,
                    subTypeName: '冰箱4',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 5,
                    subTypeName: '冰箱5',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 6,
                    subTypeName: '冰箱6',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 7,
                    subTypeName: '冰箱7',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },
            ]
        },{
            typeId: 2,
            typeName: '冰箱',
            typeList: [
                {
                    subTypeId: 1,
                    subTypeName: '冰箱1',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 2,
                    subTypeName: '冰箱2',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 3,
                    subTypeName: '冰箱3',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 4,
                    subTypeName: '冰箱4',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 5,
                    subTypeName: '冰箱5',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 6,
                    subTypeName: '冰箱6',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },{
                    subTypeId: 7,
                    subTypeName: '冰箱7',
                    subTypeIcon: '/src/assets/lunbo/image2.jpeg'
                },
            ]
        }
    ];
}

const toQueryShopList = (subTypeId) => {
    router.push({name: 'queryShopList', params: {id: subTypeId}});
}

onMounted(() => {
    getShopTypeById(null);
});

</script>

<style scoped>
.ze-an{
    background-color: #d9d9d9;
}
.an-ning {
    width: 100%;
    height: 40px;

    background-color: white;
    display: flex;
}
.an-ning .go-back {
    width: 40px;
    height: auto;
    font-size: 20px;
    margin: auto;
    cursor: pointer;
}
.an-ning .an-type-name {
    width: 100%;
    height: 40px;
    font-weight: bold;
    height: auto;
    margin: auto;
}

.ze-body {
    height: 100%;
    display: flex;
    margin-top: 10px;
}
.ze-body .body-type {
    width: 25%;
}
.body-type li {
    list-style: none;
    margin: 0px;
    padding: 8px 0px;
    width: 100%;
    font-size: 14px;
    cursor: pointer;
}
.selected-type {
    font-weight: bold;
    background-color: #ffffff;
    color: #3c78d8;
    cursor: pointer;
}
.ze-body .body-show {
    width: 75%;
    background-color: #ffffff;
    height: auto;
}
.show-shop-type {
    text-align: center;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    padding: auto;
    width: 100%;
    overflow: hidden;
}
.type-title {
    width: 100%;
    height: auto;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    text-align: left;
}
.type-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    float: left;
    width: 55px;
    text-align: center;
    margin: 0px 20px;
    margin-bottom: 20px;
    cursor: pointer;
}
.type-content img {
    width: 55px;
    height: 55px;
}
.type-content p {
    font-size: 13px;
    margin: auto;
    color: #666666;
}

</style>
